<%@ page language="java" contentType="text/html;charset=UTF-8" %><%@ include file="../../inc/global.jsp" 
%>
<!doctype html>
<html>
<head>
<title>中国家用电器协会-惠民大抽奖</title>
<%@include file="../head.jsp" %>
<style type="text/css">
.header {background:#fff;}
.wrapper {width:1000px;}
.nav{height:10px; background:#ff4400; margin:0px 0px 11px 0px;
	-moz-border-radius:5px;
	border-top-left-radius:5px;
	border-top-right-radius:5px;
	border-bottom-right-radius:0;
	border-bottom-left-radius:0;
}
.sidebar {
	background:#ffee00;
	border-top-left-radius:5px;
	border-top-right-radius:5px;
	border-bottom-right-radius:5;
	border-bottom-left-radius:5;
}
h1 {margin:3px 0px;}
h3, h4 {margin:3px 0px 0px 3px;}
input[type=text]{margin:0px; border:1px solid #333;}
input[type=text], button{height:40px;line-height:40px; font-size:16px; font-weight:bold;}
table {border:0px;}
.list{border:1px solid #b0b0b0;}
.memo {width:99%; margin:11px 7px 11px 7px; padding:11px 0px 0px 0px; border-top:1px solid #ff6600;}
.memo ul li {display:inline-block; margin-right:21px;}
.memo .winner {width:50%; float:right;}
.memo table {width:49%;}
.memo table tr th {background:#fff;}
.memo table tr td {color:#000099;}
#prizeItems {display:none;}
.prizeItem {font-size:16px; font-weight:bold}
</style>
<script type="text/javascript">
var billIdCorrect = false; // 检查订单编号是否合法
function billIdImproperTip() {
	notif({
		msg: "系统发现订单编号错误！请输入正确的订单编号！",
		type: "error",
		position:"center"
	});
}
function getBillInfo() {
	var url = '/a/ticket/ajax/billInfo';
	var bid = $('#bid').val()+'';
	$.ajax({
		url:url,
		type:'POST',
		data:{
			'bid':bid,
			},
		success:function(data){
			var json = $.parseJSON(data);
			if(json.succeed) {
				var txt = '<ul>';
				txt+='<li>客户：'+json.data.customer.name+'</li>';
				txt+='<li>订单金额：'+json.data.bill.realPayables+'</li>';
				txt+='<li>抽奖次数：'+json.data.drawNumber+'</li>';
				txt+='<li>剩余次数：'+(json.data.drawNumber-json.data.winnerCount)+'</li>';
				txt+='</ul>';
				$('#billInfo').html(txt);
				billIdCorrect = true;
			} else {
				billIdImproperTip();
			}
		},
		error:function(){
			notif({
				msg: "系统繁忙！请稍候再试！",
				type: "error",
				position:"center"
			});
		}
	});
}
$(function(){
	defaultKeys('bid', '抽奖编号');
	var bidSucceed = false;
	$('#bid').blur(function(){
		getBillInfo();
	});
	$('button').click(function() {
		if(!billIdCorrect) {
			billIdImproperTip();
			return ;
		}
		// 订单编号正确执行
		$('#bid').fadeOut(1500, function(){
			$('#prizeItems').fadeIn(1000, function(){
				var items = new Array();
				<c:forEach var="item" items="${prizeItems}" varStatus="i">
				items[${i.index}] = '${item.name}';
				</c:forEach>
				//alert('可以抽奖了');
				
			});
		});
	});
});
</script>
</head>
<body>
<div class="wrapper">
<div class="header">
<a href="http://www.cheaa.org/">
<img src="/static/images/jiadian.gif" title="中国家电协会"/>
</a>
</div>
<div class="nav"></div>
<div class="body">
<div class="sidebar">
<h3>获奖名单</h3>
<h4>地区：天津蓟县</h4>
</div>
<h1>惠民抽奖</h1>
<div class="list">
<table>
<tr>
<td style="width:200px;">
</td>
<td>
<input id="bid" name="bid" type="text" value="抽奖编号" style="width:260px;"/>
<div id="prizeItems">

</div>
</td>
<td style="width:300px;">
<button>开始抽奖</button>
</td>
<td></td>
</tr>
</table>
<div class="memo" id="billInfo">
</div>
<div class="memo">
<div class="winner">
<h3>获奖信息</h3>
<table>
<tr>
<th>客户</th>
<th>所在地</th>
<th>奖项</th>
</tr>
</table>
</div>
<div class="prize">
<h3>奖项设置</h3>
<table>
<tr>
<th>奖品名称</th>
<th>价值</th>
<th>剩余数量</th>
</tr>
<c:forEach var="item" items="${prizeItems}">
<tr>
<td>${item.name}</td>
<td>${item.value}</td>
<td>${item.count}</td>
</tr>
</c:forEach>
</table>
</div>
</div>
</div>
<!--  -->
</div>
</div>
</body>
</html>